<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*方法一: 1.只初始化颜色数组,如需要名字和值,再在数组中检索对应的标签文本 */
			/*方法二: 2.初始化两个数组，分别是颜色名和颜色值 */
			let colorName=[]
			let colorValue=[]
			let colors=[] //表示所有的颜色
			function init(){
				//1.创建核心对象 固定的
				let xhr =new XMLHttpRequest()
				//2.创建请求
				xhr.open("GET","color.xml",true) //第二个写地址,false 表示同步
				//3.发送请求 固定的
				xhr.send()
				//4.接收,解析（纯文本不需要解析）,显示数据
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){ //请求完成且服务器正常
						let data=xhr.responseXML
						colorsName=data.querySelectorAll("color>name")
						colorsValue=data.querySelectorAll("color>value")
						//将颜色的名字动态的加载到下拉列表中
						let s =document.querySelector("select")
						for (let i = 0; i < colorsName.length; i++) {
							//将第i个颜色的名字写到下拉列表的第i个选项中
							s.options[i]=new Option(colorsName[i].innerHTML)
						}
						document.body.setAttribute("style","background-color:"+colorsValue[0].innerHTML+";")
					}
				}
			}
			function change(){
				//先知道用户选择了哪一个颜色
				let s=document.querySelector("select")
				let index=s.selectedIndex//保存了用户选择的索引值
				document.body.setAttribute("style","background-color:"+colorsValue[index].innerHTML+";")
			}
		</script>
	</head>
	<body onload="init()"> <!-- 网页加载完毕立即触发 -->
		设置网页背景色：
		<select onchange="change()"></select>
	</body>
</html>
